<template>
  <h1>你好 VUE3</h1>
  <div>你好，我叫{{ name }},今年{{ age }}岁</div>
  <button @click="sayHello">sayHello</button>
  <button @click="chageInfo">改变信息</button>
</template>

<script>
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    let name = ref("张三");
    let age = ref(18);

    function sayHello() {
      alert(`我叫${name.value},今年${age.value}岁`);
    }

    function chageInfo() {
      console.log("name", name);
      console.log("age", age);
      name.value = "李四";
      age.value = 20;
    }

    // 返回一个对象 (常用) 对象中的属性可直接在模板中使用
    return {
      name,
      age,
      sayHello,
      chageInfo,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
